<template>
  <div ref="myRef" data-bs-toggle="tooltip" data-bs-placement="top"
       title="">
  </div>
</template>

<script>
import {getCurrentInstance, onMounted, ref} from "vue";
import $ from "jquery";
import url from "@/router/api";

export default {
  name: "PieState",
  setup() {
    const {proxy} = getCurrentInstance()
    const myRef = ref(null)

    let value1 = [null];
    let value2 = [null];

    onMounted(() => {
      renderChart();
    })

    let myChart = null

    const renderChart = () => {
      if (myChart === null) {
        myChart = proxy.$echarts.init(myRef.value)
      }

      myChart.setOption({
        title: {
          text: '上架下架状态',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '上架下架数量',
            type: 'pie',
            radius: '50%',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.6)'
              }
            }
          }
        ]
      });
    };
    setInterval(() => {
      if (myChart === null) {
        return
      }
      getAllState();
      myChart.setOption({
            series: [
              {
                data: [
                  { value: value1.amount, name: "下架" },
                  { value: value2.amount, name: "上架" }
                ],
              }
            ]
          }
      )
    }, 5000);

    const getAllState = () => {
      $.ajax({
        url: url.statusAmount,
        type: "GET",
        success(resp) {
          if (resp.errorCode === "00000") {
              value1 = resp.data[0]
              value2 = resp.data[1]
          }
        },
        error(resp) {
          console.log(resp)
        }
      })
    };

    return {
      myRef,
    }
  }
}
</script>

<style scoped>

</style>